<template>
    <div>
        <div id="main" style="width: 100%;height:400px;"></div>
    </div>
</template>
<script setup lang="ts">
// 1.导入echarts
import * as echarts from 'echarts';
import service from '@/api'
import { onMounted, ref } from 'vue'


// 2.挂载到页面渲染后
onMounted(async () => {
    // 3.实例化echarts
    var myChart = echarts.init(document.getElementById('main') as HTMLDivElement);
    // 3.请求数据
    // 消息统计相关接口（）
    let res1 = await service.xss.messageStatistics_msgNum({ year: 2023, month: 2 })
    // console.log(res1.data.data);
    // // 健名和键值我都要
    let newtable: any = []
    res1.data.data.map((item: { name: any; }) => {
        newtable.push(item.name)
    });
    // console.log(newtable);
    let newtable2: any = []
    res1.data.data.map((item: { num: any; }) => {
        newtable2.push(item.num)
    });
    // console.log(newtable);
    // // 所有条数
    // let baifenbi = newtable.value.reduce((prev, item) =>prev += Number(item.num), 0)
    // // 符合条件条数
    // let fil = newtable.value.map((item,index) =>newtable.value[index].log = (item.num / baifenbi*100).toFixed(2) + '%')
    // console.log(fil);
    // console.log(newtable);
    // 4.绘图
    myChart.setOption({
        title: { //标题设置
            // text: 'echarts 入门示例',
            // left: 'center'
        },
        legend: { //图例的设置
            top: 30
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: { //x轴
            data: newtable,
        },
        yAxis: { //y轴
            //   min:0,  //取0为最小刻度
            //   max: 100, //取100为最大刻度
        },
        series: [ //数据系列
            {
                // name: '销量',
                type: 'bar',
                data: newtable2,
                // showBackground: true,
                barWidth: '15',	//柱状条宽度
                itemStyle: {
                    normal: {
                        //这里是重点
                        color: function (params: any) {
                            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                            var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                            return colorList[params.dataIndex]
                        }
                    }
                }
            }
        ],
        backgroundStyle: { //背景样式
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  //颜色(渐变色)
                { offset: 0, color: '#83bf00' },
                { offset: 0.5, color: '#1800f0' },
                { offset: 1, color: '#1800f0' }
            ])
        },

    });
})
</script>

<style scoped></style>